<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">{{ $t("common.edit") + title }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <view class="inp">
        <!-- <textarea class="textarea" v-model="value" maxlength="60" /> -->
        <!-- <u-number-box step="0.25" v-model="value" decimal-length="1">
          <text
            slot="input"
            style="width: 50px; text-align: center"
            class="input"
            >{{ value }}</text
          >

        </u-number-box> -->
        <view class="inpTitle">{{ title }}</view>
        <view v-if="status === 1" class="icon">¥</view>
        <view class="input">
          <u-input
            v-if="status === 1"
            v-model="value"
            type="digit"
            clearable
            @blur="getPrice"
          ></u-input>
          <u-input
            v-model="value"
            v-else
            type="number"
            clearable
            @blur="getPrice"
          ></u-input>
        </view>
      </view>

      <view class="popBtn">
        <u-button
          @click="submit"
          :disabled="disabled"
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px',
          }"
          :hoverStartTime="hoverStartTime"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      disabled: false,
      value: 0,
      hoverStartTime: 1000000,
    };
  },

  props: {
    title: {
      type: String,
    },

    status: { type: Number, default: 1 },
  },

  methods: {
    submit() {
      let { value } = this;
      if (value === "") {
        this.$utils.toast("请输入内容!");
        return;
      }
      this.disabled = true;
      this.$emit("changeValue", value);
    },

    getPrice() {
      let { status, value } = this;

      if (status === 1) {
        this.value = parseFloat(value).toFixed(2);
      } else {
        this.value = parseInt(value);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.popBtn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-top: 1px solid #f2f2f2;
}

.textarea {
  padding: 24rpx 24rpx 80rpx;
  width: 100%;
  height: 232rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #262626;
}

.inp {
  position: relative;
  /* padding: 30rpx 36rpx 10rpx; */
  display: flex;
  align-items: center;
  margin: 0 36rpx;
  padding: 0 20rpx;
  background: #f8f8f8;

  .inpTitle {
    width: 200rpx;
  }

  .icon {
    margin-right: 10rpx;
    color: #8c8c8c;
  }

  .input {
    flex: 1;
    overflow: hidden;

    ::v-deep{
      .u-input__input{
        background: none;
      }
    }
  }
}

.number {
  position: absolute;
  right: 60rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  color: #8c8c8c;
}
</style>
